[#assign title]游戏大厅[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style>
    .left-menu {
        width: 64px;
        margin-left: -12px;
        text-align: center;
    }

    .left-menu .list-group-item {
        padding-left: 0;
        padding-right: 0;
    }

    .content-main {
        padding-left: 54px;
        margin-right: -10px;
    }

    .content-main .card {
        color: #495057;
        padding: 5px 0px 0px 0px;
        margin-bottom: 2px;
    }

    .content-main .card img {
        max-width: 60px;
        max-height: 60px;
    }

    @media (min-width: 992px) {
        .content-main .card img {
            max-width: 120px;
            max-height: 120px;
        }
    }

    .content-main .card-body {
        padding: 5px 0px 0px 0px;
    }

    .content-main .card-body .progress {
        height: 3px;
        margin: 0 5px;
    }

    .content-main .card-body p {
        margin: 0 5px;
        min-height: 3rem;
        max-height: 3rem;
        overflow: hidden;
    }

</style>
[/#macro]
[#macro body]
<div class="list-group position-fixed left-menu">
    <a href="javascript:;" v-for="(category, index) in categoryList"
       class="list-group-item list-group-item-action"
       :class="{ 'active': isActiveCategory(category) }"
       v-on:click="loadGameList(index, $event)">
        {{ category.name }}
    </a>
</div>
<div class="row no-gutters content-main">
    <div class="col-6 col-sm-6 col-md-3 col-lg-2 d-flex align-items-stretch" v-for="(gameDetail, index) in gameList">
        <a class="card w-100"
           :href="'/game/detail/' + gameDetail.game.id"
           :title="'[第' + gameDetail.game.period + '期]' + gameDetail.game.name + '【' + gameDetail.game.region + '】'"
           :data-variable="gameDetail.room = (gameDetail.room ? gameDetail.room : {people:0,maxPeople:gameDetail.game.people})">
            <img class="rounded mx-auto" :src="gameDetail.game.img"/>
            <div class="card-body w-100">
                <p class="card-text">
                    [第{{gameDetail.game.period}}期]{{gameDetail.game.name}}【{{gameDetail.game.region}}】</p>
                <div class="row no-gutters text-muted">
                    <div class="col-12">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar"
                                 :style="{width: (gameDetail.room.people*100/gameDetail.room.maxPeople).toFixed(0) + '%'}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row no-gutters text-muted">
                    <div class="col-4 d-flex justify-content-center">
                        <small>参与:</small>
                        <small class="text-primary">{{gameDetail.room.people}}</small>
                    </div>
                    <div class="col-4 d-flex justify-content-center">
                        <small>总需:{{gameDetail.room.maxPeople}}</small>
                    </div>
                    <div class="col-4 d-flex justify-content-center">
                        <small>还需:</small>
                        <small class="text-danger">{{gameDetail.room.maxPeople - gameDetail.room.people}}</small>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            categoryList: [],
            gameList: [],
            selectedCategory: {}
        },
        methods: {
            isActiveCategory: function (category) {
                var vm = this;
                return vm.selectedCategory.id == category.id;
                // return vm.selectedCategory == category;
            },
            loadGameList: function (index, event) {
                var vm = this;
                var category = vm.categoryList[index];
                if (!category) {
                    return;
                }
                vm.selectedCategory = category;
                axios.post('/game/list/' + category.id).then(function (response) {
                    vm.gameList = response.data;
                });
            }
        },
        computed: {
            // fullName: function () {
            //     return this.firstName + ' ' + this.lastName
            // }
        },
        mounted: function () {
            appHeader.isShow = false;
            appFooter.isShow = true;
            var vm = this;
            axios.post('/game/category').then(function (response) {
                response.data.unshift({'id': -1, 'name': 'pai友圈'});
                vm.categoryList = response.data;
                vm.loadGameList(0);
            });
        }
    });
</script>
[/#macro]